<template>
  <div>
    <!-- VIP内容 -->

    <div class="warp" v-if="show">
      <div class="warp buy-top">
        <img src="../assets/imgs/buy-banner.0468c5a.png" width="100%" alt="" />
        <div class="buy-top-text">
          易学啦目前提供超过5000+完整视频资料、100套+听力、300万+题库以及60万+教案和试卷等材料，并每天持续更新。
          <br />
          开通VIP即可享受全部服务，不受系统功能限制。立即开通，即时生效。
          支付遇到问题？
          <a href=""> 联系客服 QQ 2721083421 </a>
        </div>
      </div>
      <div class="warp buy-welfare">
        <div class="buy-welfare-box">
          <img src="../assets/imgs/buy_1.0096e21.png" alt="" />
          <p>权益互通</p>
        </div>
        <div class="buy-welfare-box">
          <img src="../assets/imgs/buy_2.037cc56.png" alt="" />
          <p>高清下载</p>
        </div>
        <div class="buy-welfare-box">
          <img src="../assets/imgs/buy_3.4a041bd.png" alt="" />
          <p>全站资料</p>
        </div>
        <div class="buy-welfare-box">
          <img src="../assets/imgs/buy_4.001254c.png" alt="" />
          <p>教案课件</p>
        </div>
        <div class="buy-welfare-box">
          <img src="../assets/imgs/buy_5.0c6457d.png" alt="" />
          <p>真正无限</p>
        </div>
        <div class="buy-welfare-box">
          <img src="../assets/imgs/buy_6.f446c03.png" alt="" />
          <p>日均低至2毛</p>
        </div>
        <div class="buy-welfare-box">
          <img src="../assets/imgs/buy_7.abb5395.png" alt="" />
          <p>App专属</p>
        </div>
      </div>
      <div class="buy-title warp mt-10">
        <img src="../assets/imgs/buy-title-l.49db3cf.png" alt="" />
        <span>易学啦8周年庆特惠活动 VIP会员限时优惠！</span>
        <img src="../assets/imgs/buy-title-r.c778525.png" alt="" />
      </div>
      <div class="usertype-box warp">
        <div class="vip-intro-box">
          <div class="vip-period">
            <div class="buy-money">
              <div class="buy-item">
                <h3>包月VIP</h3>
                <div class="linear-gradient-box">
                  <div class="linear-gradient1"></div>
                  <div class="linear-gradient2"></div>
                  <div class="linear-gradient3"></div>
                </div>
                <div class="price">原价：<span>￥80</span></div>
                <h1>￥<span>60</span></h1>
                <p>适合临时用户</p>
                <div class="buy-money-btn" @click="opendvip('60', '包月VIP')">
                  立即开通
                </div>
              </div>
              <div class="buy-item">
                <h3>终身会员</h3>
                <div class="linear-gradient-box">
                  <div class="linear-gradient1"></div>
                  <div class="linear-gradient2"></div>
                  <div class="linear-gradient3"></div>
                </div>
                <div class="price">原价：<span>￥1888</span></div>
                <h1>￥<span>688</span></h1>
                <p>活动推出，超高性价比，权限大</p>
                <div class="buy-money-btn" @click="opendvip('688', '终身会员')">
                  立即开通
                </div>
              </div>
              <div class="buy-item">
                <h3>包年会员</h3>
                <div class="linear-gradient-box">
                  <div class="linear-gradient1"></div>
                  <div class="linear-gradient2"></div>
                  <div class="linear-gradient3"></div>
                </div>
                <div class="price">原价：<span>￥650</span></div>
                <h1>￥<span>288</span></h1>
                <p>权限适中，性价比适中</p>
                <div class="buy-money-btn" @click="opendvip('288', '包年会员')">
                  立即开通
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="warp buy-title">
        <img src="../assets/imgs/buy-title-l.49db3cf.png" alt="" />
        <span>各VIP权限对比</span>
        <img src="../assets/imgs/buy-title-r.c778525.png" alt="" />
      </div>
      <div class="warp buy-vip-list">
        <div class="buy-vip-list-td list-td-color1">
          <p>功能点</p>
          <ul>
            <li>听力下载</li>
            <li>视频下载</li>
            <li>打包下载</li>
            <li>试卷课件教案下载</li>
            <li>网页观看视频</li>
            <li>观看高清&amp;超清视频</li>
            <li>网站广告</li>
            <li>听听力</li>
            <li>网站使用咨询</li>
          </ul>
        </div>
        <div class="buy-vip-list-td list-td-color2">
          <p>注册用户</p>
          <ul>
            <li>2个/天</li>
            <li><i class="iconfont icon-error-1"></i></li>
            <li><i class="iconfont icon-error-1"></i></li>
            <li>2个/每天</li>
            <li>限免费部分</li>
            <li><i class="iconfont icon-error-1"></i></li>
            <li>有广告</li>
            <li><i class="iconfont icon-right-1"></i></li>
            <li><i class="iconfont icon-error-1"></i></li>
          </ul>
          <div class="vip-list-btn no-buy">无需开通</div>
        </div>
        <div class="buy-vip-list-td list-td-color3">
          <p>月费会员</p>
          <ul>
            <li>20个/天</li>
            <li>10个/天</li>
            <li><i class="iconfont icon-right-1"></i></li>
            <li>20个/天</li>
            <li><i class="iconfont icon-right-1"></i></li>
            <li><i class="iconfont icon-right-1"></i></li>
            <li>无广告</li>
            <li><i class="iconfont icon-right-1"></i></li>
            <li><i class="iconfont icon-error-1"></i></li>
          </ul>
          <div class="vip-list-btn">立即开通</div>
        </div>
        <div class="buy-vip-list-td list-td-color4">
          <p>年费会员</p>
          <ul>
            <li>50个/天</li>
            <li>30个/天</li>
            <li><i class="iconfont icon-right-1"></i></li>
            <li>50个/天</li>
            <li><i class="iconfont icon-right-1"></i></li>
            <li><i class="iconfont icon-right-1"></i></li>
            <li>无广告</li>
            <li><i class="iconfont icon-right-1"></i></li>
            <li><i class="iconfont icon-error-1"></i></li>
          </ul>
          <div class="vip-list-btn">立即开通</div>
        </div>
        <div class="buy-vip-list-td list-td-color5">
          <p>终身会员</p>
          <ul>
            <li>不限次数</li>
            <li>不限次数</li>
            <li><i class="iconfont icon-right-1"></i></li>
            <li>不限次数</li>
            <li><i class="iconfont icon-right-1"></i></li>
            <li><i class="iconfont icon-right-1"></i></li>
            <li>无广告</li>
            <li><i class="iconfont icon-right-1"></i></li>
            <li><i class="iconfont icon-right-1"></i></li>
          </ul>
          <div class="vip-list-btn">立即开通</div>
        </div>
      </div>
      <div class="buy-title warp mt-10">
        <img src="../assets/imgs/buy-title-l.49db3cf.png" alt="" />
        <span>为什么要开通易学啦会员</span>
        <img src="../assets/imgs/buy-title-r.c778525.png" alt="" />
      </div>
      <div class="buy-pk warp">
        <div class="buy-pk-left">
          <h1>易学啦会员</h1>
          <p>价格透明，会员日均低至0.2元</p>
          <p>全站资料完全贴合在校教材，根据教材校订实时更新</p>
          <p>不限学习时长，下载次数，更多自由</p>
        </div>
        <div class="buy-pk-right">
          <h1>其他网站会员</h1>
          <p>价格不透明，收费项目多</p>
          <p>会员费，单独课程单独收费，资源不互通</p>
          <p>资料来源不明，版本杂乱老旧，不符合最新授课考试内容</p>
        </div>
      </div>
      <div class="buy-title warp">
        <img src="../assets/imgs/buy-title-l.49db3cf.png" alt="" />
        <span>易学啦会员功能介绍</span>
        <img src="../assets/imgs/buy-title-r.c778525.png" alt="" />
      </div>
      <div class="buy-fun warp">
        <div class="buy-fun-box">
          <img src="../assets/imgs/buy-fun-1.png" alt="" />
          <p>
            听力下载随身听
            <br />
            离线下载随时随地
          </p>
        </div>
        <div class="buy-fun-box">
          <img src="../assets/imgs/buy-fun-2.png" alt="" />
          <p>
            视频下载随身看
            <br />
            在线高清视频
          </p>
        </div>
        <div class="buy-fun-box">
          <img src="../assets/imgs/buy-fun-3.png" alt="" />
          <p>
            与APP账号同步
            <br />
            网站，APP均可使用
          </p>
        </div>
        <div class="buy-fun-box">
          <img src="../assets/imgs/buy-fun-4.png" alt="" />
          <p>
            视频、听力、课件、教案
            <br />
            一次开通全部体验
          </p>
        </div>
        <div class="buy-fun-box">
          <img src="../assets/imgs/buy-fun-1.png" alt="" />
          <p>资料下载不限速</p>
        </div>
      </div>
      <div class="buy-title warp">
        <img src="../assets/imgs/buy-title-l.49db3cf.png" alt="" />
        <span>常见问题解答</span>
        <img src="../assets/imgs/buy-title-r.c778525.png" alt="" />
      </div>
      <div class="buy-question warp">
        <div class="buy-question-left">
          <ul>
            <li class="cursor">资料下载下来，会员到期了怎么办？</li>
            <li class="cursor">会员有效期从什么时候开始算？</li>
            <li class="cursor">付费后没显示会员怎么办？</li>
            <li class="cursor">会员可以无限制使用网站资源吗？</li>
            <li class="cursor">会员听课会有科目或年级限制吗？</li>
            <li class="cursor">怎么付费？目前支持哪些付费方式？</li>
          </ul>
        </div>
        <div class="buy-question-right">
          <p>
            会员有效期从付费成功之时起，向后延申计算。<br />
            如您是2020年10月1日购买年费会员，则您的会员有效期至2021年9月30日。
            <br />
            月费会员计算天数为30天，年费会员计算周期为365天
          </p>
        </div>
      </div>
    </div>


    <!-- 支付弹窗 -->
    <div class="box" v-if="!show"></div>
    <div class="gg" v-if="!show">
      <div class="del" @click="dels">关闭</div>
      <el-steps :active="active" finish-status="success">
        <el-step title="选择支付方式 "></el-step>
        <el-step title="支付 "></el-step>
        <el-step title="完成 "></el-step>
      </el-steps>

      <div class="player">
        <br />
        <div class="bxo" v-if="active == 0">
          <p>订单类型：{{ viptime }}</p>
          <br />
          <p>订单价格：{{ viprice }}</p>
          <br />
          <div>
            <el-radio v-model="radio1" label="1" border>微信支付</el-radio>
            <el-radio v-model="radio1" label="2" border>观看广告支付</el-radio>
          </div>
        </div>
        <div class="bxo" v-if="active == 1">
          <div class="bxoimg" v-if="radio1 == '1'">
            <img src="../assets/imgs/prices.png" alt="" />
          </div>
          <vue-core-video-player
            v-if="radio1 == '2'"
            src="../assets/imgs/video/cdadv/广告021.mp4"
            title="广告"
            volume="0.5"
            style="width: 50%"
          />
        </div>
        <div class="bxo" v-if="active == 2">
          <p>订单类型：{{ viptime }}</p>
          <br />
          <p>订单价格：{{ viprice }}</p>
          <br />
          <p>订单状态：支付成功</p>
          <br />
        </div>
        <div class="bxobtn">
          <el-button style="margin-top: 12px" @click="next" v-if="pages"
            >下一步</el-button
          >
          <el-button style="margin-top: 12px" @click="nextback" v-if="!pages"
            >返回</el-button
          >
        </div>
      </div>
    </div>

    <!-- VIP内容 END-->
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      active: 0,
      radio1: "1",
      pages: true,
      viprice: null,
      viptime: null,
    };
  },
  methods: {
    opendvip(price, time) {
      // console.log(price);
      localStorage.setItem("viprice", price);
      localStorage.setItem("viptime", time);
      this.viprice = price;
      this.viptime = time;
      let html = document.documentElement;
      var timer = setInterval(() => {
        if (html.scrollTop <= 0) {
          clearInterval(timer);
        }
        html.scrollTop = html.scrollTop - 100;
      }, 10);
      this.show = false;
    },
    next() {
      if (this.active == 1 && this.radio1 == "1") {
        localStorage.setItem("getvip", 1);
        this.active++;
        return;
      }
      this.active++;
      if(this.active == 3){
        this.pages = false;
      }
    },
    nextback() {
      console.log("back");
      this.pages = true;
      this.active = 0;
      if(localStorage.getItem("getvip")){
        this.$router.push("home")
        return
      }
    },
    dels(){
      this.show=true;
      let html = document.documentElement;
      var timer = setInterval(() => {
        if (html.scrollTop <= 0) {
          clearInterval(timer);
        }
        html.scrollTop = html.scrollTop - 100;
      }, 10);
    }
  },

  watch: {
    active: function () {
      if (this.active == 1 && this.radio1 == "2") {
        this.pages = false;
        console.log("是否进入判断");
        var getvip= setTimeout(() => {
          console.log("设置通过条件");
          localStorage.setItem("getvip", 1);
          this.pages = true;
        }, 3000);
        return
      }else if(localStorage.getItem("getvip")){
        clearTimeout(getvip);
      }
    },
  },

  computed: {
    
  },
};
</script>

<style lang="scss" scoped>
// 支付流程
.box {
  width: 100%;
  height: 80vh;
  display: block;
  background: rgba(51, 51, 51, 0.1);
}
.gg {
  width: 50%;
  height: 450px;
  padding: 50px;
  position: absolute;
  background: #fff;
  top: 20%;
  left: 0px;
  right: 0px;
  margin: 0 auto;
  .del{
    // width: 40px;
    height: 20px;
    line-height: 20px;
    padding: 1px 15px;
    display: inline-block;
    font-size: 14px;
    color: #f76447;
    border: 1px solid #f76447;
    margin-bottom: 25px;
  }
}

.player {
  font-size: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .bxo {
    .bxoimg {
      height: 150px;
      img {
        height: 150px;
      }
    }
  }
}

.buy-top {
  padding-top: 30px;
  display: flex;
  justify-content: center;
  position: relative;
  .buy-top-text {
    position: absolute;
    bottom: 104px;
    width: 928px;
    height: 96px;
    font-size: 16px;
    font-weight: 400;
    color: #cac9d5;
    line-height: 32px;
    letter-spacing: 1px;
    text-align: center;
    a {
      color: #fbe6c2;
      text-decoration: underline;
    }
  }
}
.buy-welfare {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 40px auto;
  .buy-welfare-box {
    width: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      width: 96px;
      height: 96px;
    }
    p {
      font-size: 16px;
      font-weight: 500;
      color: #333;
      line-height: 22px;
      margin-top: 8px;
    }
  }
}
.buy-title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px auto;
  span {
    font-size: 22px;
    font-weight: 600;
    color: #915d28;
    line-height: 37px;
    margin: 0 10px;
    font-size: 22px;
    font-weight: 600;
    color: #915d28;
    line-height: 37px;
    margin: 0 10px;
  }
}
.usertype-box {
  margin: 0 auto;
}
.buy-money {
  margin-top: 60px;
  margin-bottom: 79px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  .buy-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url(../assets/imgs/wt.8f59108.png);
    height: 380px;
    width: 340px;
  }
  h3 {
    font-size: 28px;
    font-weight: 600;
    color: #915d28;
    line-height: 40px;
    margin-top: 26px;
  }
  .linear-gradient-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 15px 0 20px;
    .linear-gradient1 {
      width: 140px;
      height: 2px;
      background: linear-gradient(90deg, #ffffff00, #fff);
    }
    .linear-gradient2 {
      width: 8px;
      height: 8px;
      background: #fff;
      border-radius: 50%;
    }
    .linear-gradient3 {
      width: 140px;
      height: 2px;
      background: linear-gradient(90deg, #fff, #ffffff00);
    }
  }
  .price {
    text-align: center;
    text-decoration: line-through;
    padding: 10px;
    font-size: 20px;
  }
  h1 {
    font-size: 40px;
    font-weight: 500;
    color: #915d28;
    line-height: 56px;
    span {
      font-size: 70px;
      font-weight: 550;
    }
  }
  p {
    font-size: 16px;
    font-weight: 400;
    color: #915d28;
    line-height: 26px;
    margin-top: 22px;
    text-align: center;
    width: 250px;
    height: 52px;
  }
  .buy-money-btn {
    width: 200px;
    height: 50px;
    background: linear-gradient(180deg, #fff, #fee7be);
    box-shadow: 0 2px 12px 0 rgba(239, 158, 86, 0.4);
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    font-size: 20px;
    font-weight: 500;
    color: #915d28;
    line-height: 28px;
    cursor: pointer;
  }
}
.buy-vip-list {
  margin-top: 40px;
  display: flex;
  align-items: flex-end;
  .list-td-color1 {
    padding-bottom: 120px;
    background: #f7f8fa;
  }
  .buy-vip-list-td {
    flex: 1;
    p {
      padding: 29px 0 31px;
      font-size: 22px;
      font-weight: 600;
      color: #915d28;
      text-align: center;
      border-bottom: 1px solid #eee;
    }
  }
  .list-td-color2 {
    background: #fff;
  }
  .list-td-color3 {
    background: #fcfcfd;
  }
  .list-td-color4 {
    background: #f7f8fa;
  }
  .list-td-color5 {
    background: #f1f3f5;
  }
  ul {
    li {
      width: 100%;
      height: 68px;
      font-size: 16px;
      font-weight: 400;
      color: #333;
      line-height: 22px;
      border-bottom: 1px solid #eee;
    }
  }
  .vip-list-btn {
    width: 140px;
    height: 46px;
    background: #915d28;
    border-radius: 10px;
    margin: 37px auto;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
  }
  .no-buy {
    color: #333;
    background: none;
  }
}
.buy-vip-list .vip-list-btn,
.buy-vip-list ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon-right-1 {
  color: #f76447;
}
.buy-pk {
  height: 365px;
  background: url(../assets/imgs/pk_bg.bce7e6a.png) no-repeat;
  display: flex;
  padding-bottom: 40px;
  .buy-pk-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    h1 {
      font-size: 24px;
      font-weight: 600;
      color: #915d28;
      margin: 25px 0 65px;
    }
    p {
      font-size: 16px;
      font-weight: 500;
      color: #79522b;
      margin-bottom: 40px;
    }
  }
  .buy-pk-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    h1 {
      font-size: 24px;
      font-weight: 600;
      color: #fff;
      margin: 25px 0 65px;
    }
    p {
      font-size: 16px;
      font-weight: 500;
      color: #666;
      margin-bottom: 48px;
    }
  }
}
.buy-fun .buy-fun-box,
.buy-fun {
  display: flex;
  align-items: center;
}
.buy-fun {
  justify-content: space-between;
  padding: 40px 0;
  .buy-fun-box {
    height: 164px;
    width: 200px;
    position: relative;
    flex-direction: column;
    justify-content: center;
    background: #fff;
    box-shadow: 0 2px 24px 0 rgb(0 0 0 / 8%);
    border-radius: 6px;
    img {
      position: absolute;
      top: -45px;
    }
    p {
      text-align: center;
      font-size: 14px;
      font-weight: 400;
      color: #333;
      line-height: 30px;
    }
  }
}
.buy-question {
  display: flex;
  height: 296px;
  padding: 40px 0 100px;
  .buy-question-left {
    width: 484px;
    background: url(../assets/imgs/buy-question-bg1.1cbc1fa.png) no-repeat;
    padding-top: 20px;
    padding-left: 20px;
    li {
      width: 416px;
      height: 40px;
      background: #fff;
      border-radius: 6px;
      padding-left: 20px;
      line-height: 40px;
      margin-bottom: 14px;
      font-size: 14px;
      font-weight: 500;
      color: #333;
    }
  }
  .buy-question-right {
    width: 638px;
    background: url(../assets/imgs/buy-question-bg2.c2fa554.png) no-repeat;
    display: flex;
    align-items: center;
    padding-left: 58px;
    font-size: 16px;
    font-weight: 400;
    color: #333;
    line-height: 34px;
  }
}
</style>